@extends('admin.home.main')

@section('body')
<section id="main-content">
	  <section class="wrapper">
		<h3>焦点图添加</h3>
		<!-- BASIC FORM ELELEMNTS -->
		<div class="row mt">
		  <div class="col-lg-12">
			<div class="form-panel">
			  <form class="form-horizontal style-form" action="/admin/material/insert" method="post" enctype="multipart/form-data" id="art_form">
			  	<input type="hidden" id="_token" name="_token" value="{{csrf_token()}}" readonly="readonly">
				<div class="form-group">
				  <label class="col-sm-2 col-sm-2 control-label">banner名称</label>
				  <div class="col-sm-10">
					<input type="text" style="width:400px;" class="form-control" id="meaterial_name"
						   name="meaterial_name" placeholder="请输入banner名称" size="50">
				  </div>
				</div>

				<div class="form-group">
				  <label class="col-sm-2 col-sm-2 control-label">跳转地址</label>
				  <div class="col-sm-10">
					<input type="text" style="width:400px;" class="form-control" id="target_link" name="target_link" placeholder="请输入跳转地址" size="50">
				  </div>
				</div>

				<div class="form-group">
				  <label class="col-sm-2 col-sm-2 control-label">banner位置</label>
				  <div class="col-sm-10">
					<select class="form-control" id="position" name="position" style="width:200px">
	               		<option value="-1">请选择</option>
						<option value="0">推荐</option>
	               		@foreach($ctlist as $ctm=>$cst)
							<option value="{{$cst->id}}">{{$cst->type_name}}</option>
						@endforeach
	                </select>
				  </div>
				</div>

				<div class="form-group">
                  <label class="col-sm-2 col-sm-2 control-label">请选择banner图片</label>
                  <div class="col-sm-10">
                    <a class="btn btn-theme02" href="javascript:;" onclick="uploadPhoto()">选择图片</a>
					  <span style="color:red;">备注：图片尺寸343x150像素(px),格式：*.png,*.jpg</span>
                    <input type="file" id="material_file" style="display:none;" name="material_file" onchange="upload()">
                    <div class="fileupload-new thumbnail" style="width: 200px; margin-top:10px;">
                        <img id="preview_photo" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="">
                    </div>
                    <input type="hidden" id="imgsrc" name="imgsrc">
                  </div>
                </div>
				
				<button type="button" id="save" class="btn btn-success">提交</button>
				<button type="reset" class="btn btn-primary">重置</button>
			  </form>
			</div>
		  </div>
		  <!-- col-lg-12-->
		</div>

		
	  </section>
	  <!-- /wrapper -->
	</section>
<script type="text/javascript">
	function uploadPhoto() {
        $("#material_file").click();
    }

    function upload(){
    	if($('#material_file').val() == ''){
    		alert('请选择图片');
    		return false;
    	}

    	var formData = new FormData($('#art_form')[0]);
    	
    	$.ajax({
    		url:'/admin/material/uploads',
    		type:'post',
    		data:formData,
    		dataType:'json',
    		contentType: false,
            processData: false,
            success:function(data){
            	if(data.code == 200){
            		$('#preview_photo').attr('src','https://boom-dog.oss-cn-zhangjiakou.aliyuncs.com/'+data.imgurl);
            		$('#imgsrc').val('https://boom-dog.oss-cn-zhangjiakou.aliyuncs.com/'+data.imgurl);
            		alert('上传成功');
            	}else{
            		alert('上传失败');
            	}
            	return false;
            }
    	})
    }

    $('#save').click(function(){
    	var _token = $('#_token').val(),
    		material_name = $('#meaterial_name').val(),
    		target_link = $('#target_link').val(),
    		position = $('#position').val(),
    		material_imgurl = $('#imgsrc').val();
    	if(!material_name){
    		alert('请输入banner名称');
    		return false;
    	}

    	if(!target_link){
    		alert('请输入跳转地址');
    		return false;
    	}

    	if(position == -1){
    		alert('请选择banner所处位置');
    		return false;
    	}

    	if(!material_imgurl){
    		alert('请上传banner图片');
    		return false;
    	}

    	$.ajax({
    		url:'/admin/material/insert',
    		type:'post',
    		data:{'_token':_token,'material_name':material_name,'target_link':target_link,'position':position,'material_imgurl':material_imgurl},
    		dataType:'json',
    		success:function(data){
    			if(data.code == 200){
    				alert('banner添加成功');
    				location.href="/admin/material/list";
    			}else if(data.code == 300){
    				alert('banner已存在请勿重复添加');
    				location.reload();
    			}else{
    				alert('banner添加失败');
    				location.reload();
    			}
    		}
    	})
    })
</script>
@endsection